<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab_Multiple.aspx.cs" Inherits="Tab_Multiple" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>jQuery Tools standalone demo</title>

	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

	 

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	


	
	<!-- tab styling -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />
	
	
	<!-- tab pane styling -->
	<style>
	div.wrap {
		width:700px;
		margin-bottom:40px;
	}
	
	.wrap .pane  {	
		background:#fff url(http://static.flowplayer.org/img/global/gradient/h150.png) repeat-x 0 20px;
		display:none;		
		padding:20px;
		border:1px solid #999;
		border-top:0;
		font-size:14px;	 
		font-size:18px;
		color:#456;	
		
		_background-image:none;
	}
	
	.wrap .pane p {
		font-size:38px;	
		margin:-10px 0 -20px 0;	
		text-align:right;
		color:#578;
	}
	</style>
</head>

<body>



<div class="wrap">
	<!-- the tabs -->
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li> 
</ul>

<!-- tab "panes" -->
<div class="pane">First tab content.</div>
<div class="pane">Second tab content</div>
<div class="pane">Third tab content</div>
</div>

<div class="wrap">

	<!-- the tabs -->
	<ul class="tabs">
		<li><a href="#">Tab 1</a></li>

		<li><a href="#">Tab 2</a></li>
		<li><a href="#">Tab 3</a></li>
	</ul>

	<!-- tab "panes" -->
	<div class="pane">
		<p>#1</p>
		<!-- the tabs -->

<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li> 
</ul>

<!-- tab "panes" -->
<div class="pane">First tab content.</div>
<div class="pane">Second tab content</div>

<div class="pane">Third tab content</div>
	</div>
	 
	<div class="pane">
		<p>#2</p>
		<!-- the tabs -->
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>

	<li><a href="#">Tab 3</a></li> 
</ul>

<!-- tab "panes" -->
<div class="pane">First tab content.</div>
<div class="pane">Second tab content</div>
<div class="pane">Third tab content</div>
	</div>
	
	<div class="pane">
		<p>#3	</p>

		<!-- the tabs -->
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li> 
</ul>

<!-- tab "panes" -->
<div class="pane">First tab content.</div>

<div class="pane">Second tab content</div>
<div class="pane">Third tab content</div>
	</div>
	
</div>



<!-- This JavaScript snippet activates those tabs -->
<script>

// perform JavaScript after the document is scriptable.
$(function() {
	$("ul.tabs").tabs("> .pane");
});
</script>


</body>

</html>

